@import "../../less/@name";
.messageBox{
  top:0;
  display: flex;
  width:100%;
  position: fixed;
  justify-content: center;
  align-items: center;
  .messageBoxBg{
    left:0;
    display: flex;
    top:0;
    width:100%;
    height:100%;
    position: fixed;
    background: rgba(0,0,0,.5);
    justify-content: center;
    align-items: center;
  }
}

.messageBox0{
  .box0{
    left: 10%;
    top:42%;
    border-radius: 3px;
    position: fixed;
    background: @bg-white;
    width:80%;
    height:16%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    p{
      height:50%;
      width:100%;
      align-items: center;
      justify-content: center;
      font-size: @font-size-t;
    }
    div{
      height:50%;
      width:100%;
      justify-content: space-between;
      display: flex;
      align-items: center;
      span{
        display: flex;
        align-items: center;
        justify-content: center;
        width:50%;
        height:28px;
        border-radius: 14px;
        margin: 0 1em;
        border: 1px solid @line;
        color: @line;
        font-size: @font-size-p;
        &.active{
          border-color: @color-main-1;
          background: @color-main-1;
          color: @bg-white;
        }
      }
    }
  }

}

.messageBox1{
  .box1{
    width:100%;
    height:40%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: @bg-white;
    &>header{
      height:14%;
      align-items: center;
      justify-content: space-between;
      display: flex;
      button{
        font-size: @font-size-t;
        padding:0 1em;
      }
    }
    &>section{
      height:86%;
      padding: 0 1em;
      justify-content: center;
      align-items: center;
      display: flex;
      position: relative;
      &>div{
        overflow-y: hidden;
        width:100%;
        height:200px;
        position: relative;
        &>ul{
          overflow-y: scroll;
          flex-direction: column;
          width:100%;
          position: absolute;
          top:0;
          transition: all .3s ease-in-out;
          li{
            justify-content: center;
            align-items: center;
            font-size:@font-size-t;
            height:40px;
            span{

            }
          }
        }
      }
      &>span{
        position: absolute;
        width:100%;
        height:200px;
        span{
          display: flex;
          width:100%;
          height:40px;
          background: @bg-white;
        }
        span:nth-of-type(3){
          background: none;
          border-top: 1px solid @color-main-2;
          border-bottom: 1px solid @color-main-2;
        }
        span:nth-of-type(1),
        span:nth-of-type(5){
          opacity:0.8;
        }
        span:nth-of-type(2),
        span:nth-of-type(4){
          opacity: 0.4;
        }
      }
    }
  }
}